{extend name="public:layout" /}
{block name="title"}网站概况{/block}
{block name="head"}
<script src="/public/plugins/echarts/echarts-all.js"></script>
<style>
    .echarts {
        height: 400px;
    }
</style>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox" style="background: #fff;">
        {include file="cnzz/menu" /}
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>浏览次数(PV)</th>
                <th>独立访客(UV)</th>
                <th>IP</th>
                <th>新独立访客</th>
                <th>访问次数</th>
            </tr>
            </thead>
            <tbody>
            {volist name="list" id="vo"}
            <tr>
                <th>{$tableTile[$i]}</th>
                <td>{$vo.pv}</td>
                <td>{$vo.uv}</td>
                <td>{$vo.ip}</td>
                <td>{$vo.newuv}</td>
                <td>{$vo.session}</td>
            </tr>
            {/volist}
            </tbody>
        </table>
    </div>
    <div class="ibox">
        <div class="ibox-title">
            <a onclick="getLine(this)" data-type="1" class="btn btn-info">今日</a>
            <a onclick="getLine(this)" data-type="2" class="btn btn-white">昨日</a>
            <a onclick="getLine(this)" data-type="4" class="btn btn-white">最近7日</a>
            <a onclick="getLine(this)" data-type="5" class="btn btn-white">最近30日</a>
        </div>
        <div class="ibox-content">
            <div class="echarts" id="echarts-line-chart"></div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
    <script>
        $(function(){
            getLine(1);
        })
        //组装折线图
        function getLine(obj){
            var type=$(obj).data('type');
            $(obj).addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-white');
            $(obj).removeClass('btn-white');
            getAjax("{:url('AjaxflowTrendLine')}",{type:type},function (lineData) {
                var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                var lineoption = {
                    title : {text: lineData.title.text},
                    tooltip : {trigger: 'axis'},
                    legend: {data:lineData.legend.data},
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : lineData.xAxis.data
                        }
                    ],
                    yAxis : [{type : 'value'}],
                    series : lineData.series
                };
                lineChart.setOption(lineoption);
                $(window).resize(lineChart.resize);
            })
        }
    </script>
{/block}